<!--
 * @Author: Tim
 * @Date: 2020-08-26 11:26:04
 * @LastEditTime: 2020-08-26 19:16:07
 * @LastEditors: Please set LastEditors
 * @Description: 底部弹窗
 * @FilePath: /afire/components/af_drawer/index.vue
-->
<template>
    <view class="modal-wrapper">
        <view :class="[openned ? 'modal-mask openned' : 'modal-mask']" :animation="maskAnim" @tap.stop="close"></view>
        <view class="modal-container" :animation="modalAnim" :style="getStyl">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'AfDrawer',

        props: {
            height: {
                type: Number,
                default: 570
            }
        },

        data() {
            return {
                openned: false,
                maskAnim: null,
                modalAnim: null
            }
        },

        computed: {
            getStyl() {
                return `height: ${this.height}rpx;`
            }
        },

        methods: {
            /**
             * 关闭city picker
             * @param {*} cb
             */
            close(cb) {
                let that = this;
                //300ms完成缩放动画
                let animation = uni.createAnimation({
                    transformOrigin: "50% 50%",
                    duration: 220,
                    timeFunction: "ease-out-in"
                });

                //下移动画
                animation.translateY(this.height).step();
                this.modalAnim = animation.export();

                setTimeout(() => {
                    //显示阴影
                    let maskAnimation = uni.createAnimation();
                    maskAnimation.opacity(0).step({
                        duration: 80
                    });

                    that.maskAnim = maskAnimation.export();
                }, 310);

                setTimeout(() => {
                    //设置数据
                    that.openned = false;

                    that.$emit("modalClosed");

                    typeof cb === 'function' && cb();
                }, 320);
            },

            /**
             * @default 打开modal
             * @param {*} callback
             */
            open() {
                //初始化数据
                this.openned = true;

                //显示阴影
                let maskAnimation = uni.createAnimation();
                maskAnimation.opacity(1).step({
                    duration: 120
                });
                this.maskAnim = maskAnimation.export();

                // 延迟30ms
                const that = this;
                setTimeout(() => {
                    //300ms完成缩放动画
                    let animation = uni.createAnimation({
                        transformOrigin: "50% 50%",
                        duration: 300,
                        timeFunction: "ease-in-out"
                    });

                    //上移动画
                    animation.translateY(0).step();

                    that.modalAnim = animation.export();
                }, 130);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .modal-mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: none;
        opacity: 0;
        width: 100%;
        z-index: 8000;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.5);
    }

    .modal-container-cover {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }

    .openned {
        display: block !important;
    }

    /* picker container */

    .modal-container {
        height: 570upx;
        background: #fff;
        box-sizing: border-box;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 8001;
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }
</style>